import {AttributeEnum, AttrStrMap, UnitAttribute} from "../../../script/frame/dataSource/DataModel";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, IStates, View} from "../../../script/frame/apiModel/gui/React";
import {BuffInfo} from "../../../script/type/Type";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import AttrShowBar from "../component/AttrShowBar";
import PercentBar from "../component/PercentBar";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {BuffBarInfo, BuffBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {publicGui} from "../../interface/PublicGui";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {Logger} from "../../../script/frame/apiModel/config/Logger";

export interface IProp {
    getBuffFun: (player: PlayerModel) => BuffBarInfo;
}
export interface IState {
    attr: UnitAttribute;
    buffs: BuffInfo[];

    name: string,
    lv: number,
    exp: number,
    x: number;
    y: number;
    index: number;
    infoVisible: boolean,
}

export default class BuffBar extends BuffBarInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);

        this.state = {
            visible: true,
            name: '未选中',
            lv: 0,
            exp: 0,
            attr: new UnitAttribute(),
            buffs: [],

            x: 0,
            y: 0,
            index: 0,
            infoVisible: false,
        }
    }

    render = () => {
        const maxBuffNum = 10;
        let arr: BuffInfo[] = [];

        const blackBoard = Configer.getResource(ResourceKey.blackBoard);

        const liveMapArr = Configer.getUIConfig(UIConfigKey.BuffAttrStrLiveMapArr) as AttrStrMap[];
        const attackMapArr = Configer.getUIConfig(UIConfigKey.BuffAttrStrAttackMapArr) as AttrStrMap[];
        const speedMapArr = Configer.getUIConfig(UIConfigKey.BuffAttrStrSpeedMapArr) as AttrStrMap[];

        const lineImage = Configer.getResource(ResourceKey.expBar);
        const barBack = Configer.getResource(ResourceKey.expBarBack);

        const paddingL = 0.01250;

        for (let i = 0; i < maxBuffNum; i++) {
            const buff = this.state.buffs[i];
            if (buff) {
                // ele.pos.y = ele.pos.y - this.state.radix;
                arr.push(buff);
            } else {
                arr.push({ name: undefined, image: '', des: '', time: 0 });
            }
        }

        const iconSize: { h: number, w: number } = { h: 0.01660, w: 0.01250 };
        const margin: number = 0.00375


        const backPos = { x: 0.38125, y: 0.79680 };
        const backSize: { h: number, w: number } = { h: 0.21580, w: 0.25000 };

        const backW = backSize.w - 2 * paddingL;

        const attackTextSize: { h: number, w: number } = { h: 0.01660, w: 0.03750 };


        const fontSize = 0.01328;

        const attrTitleSize = { h: 0.04980, w: 0.07500 }
        const itemHeight = 0.02158
        const itemWidth = 0.07500

        const name = this.state.name;
        const lvText = `等级: ${this.state.lv}`;
        const exp = this.state.exp;
        const maxExp = DataRouterUtil.getMaxExpByLv(this.state.lv)

        const buffDesSize = { w: fontSize * 2, h: itemHeight };
        const titleFontSize = 0.01992

        return <View   key={GuiKeys.buffBar} style={{ hidden: !this.state.visible, backgroundImage: blackBoard, height: backSize.h, width: backSize.w, left: backPos.x, top: backPos.y, paddingL: paddingL }}>
            <View   key={GuiKeys.buffNameText} style={{ fontSize: titleFontSize, height: titleFontSize, width: backW, fontAlign: TextAlign.center, marginT: 0.01660 }}>{name}</View>
            <View   key={GuiKeys.buffLvText} style={{ fontSize: fontSize, height: attackTextSize.h, width: backW, marginT: 0.01660 }}>{lvText}</View>
            <View   key={GuiKeys.buffLv} style={{ height: attackTextSize.h, width: backW, marginT: 0.00830 }}>
                <PercentBar   key={`${GuiKeys.buffLvLine}`}  fontSize={fontSize} marginT={0} max={maxExp} current={exp} back={barBack} line={lineImage} width={backW} height={iconSize.h} showPercent={true}></PercentBar>
            </View>
            <View   key={GuiKeys.buffAttrText} style={{ height: itemHeight * 2, width: backW, marginT: 0.00830 }}>
                <View   key={GuiKeys.buffAttrAttackTextContent} style={{ width: itemWidth, height: itemHeight * 2 }}>
                    <AttrShowBar   key={GuiKeys.buffAttrAttackText} attr={this.state.attr} attrStrMaps={attackMapArr} width={attrTitleSize.w} height={itemHeight} fontSize={fontSize} attrSize={{ h: 0.016, w: 0.035 }} textAlign={TextAlign.before}></AttrShowBar>
                </View>
                <View   key={GuiKeys.buffAttrDefenseTextContent} style={{ width: itemWidth, height: itemHeight * 2 }}>
                    <AttrShowBar   key={GuiKeys.buffAttrDefenseText} attr={this.state.attr} attrStrMaps={liveMapArr} width={attrTitleSize.w} height={itemHeight} fontSize={fontSize}  attrSize={{ h: 0.016, w: 0.035  }} textAlign={TextAlign.before}></AttrShowBar>
                </View>
                <View   key={GuiKeys.buffAttrSpeedTextContent} style={{ width: itemWidth, height: itemHeight * 2 }}>
                    <AttrShowBar   key={GuiKeys.buffAttrSpeedText} attr={this.state.attr} attrStrMaps={speedMapArr}  width={attrTitleSize.w} height={itemHeight} fontSize={fontSize} attrSize={{ h: 0.016, w: 0.035  }} textAlign={TextAlign.before} ></AttrShowBar>
                </View>
            </View>
            <View   key={GuiKeys.buffsContent}  style={{ height: iconSize.h, width: backW, marginT: 0.00830 }}>
                <View   key={GuiKeys.buffsText}  style={{ height: iconSize.h, width: buffDesSize.w, fontSize: fontSize }}>状态:</View>
                <View   key={GuiKeys.buffs}  style={{ height: iconSize.h, width: (backW - buffDesSize.w - 0.00125) }}>
                    {
                        arr.map(
                            (buff, index, array) => {
                                let name = buff.name;
                                const resourceId = buff.image;
                                if (name) {
                                    const image = DataRouter.getResourceDataByResourceId(resourceId)?.src;
                                    return <View   key={`${GuiKeys.buffItem}|${index}`}  onMouseEnter={(event) => { this.showInfoPage(event.x, event.y - 0.16600, index) }} onMouseLeave={this.closeInfoPage} style={{ backgroundImage: image, width: iconSize.w, height: iconSize.h, marginL: margin }}></View>
                                }
                                return <View   key={`${GuiKeys.buffItem}|${index}`} style={{ hidden: true }}></View>
                            }
                        )
                    }
                </View>
            </View>
        </View>
    }

    resetBuffs = () => {
        const ret = this.props.getBuffFun(PlayerFactory.getInstance().getLocalPlayer())
        if (ret) {
            const unit = ret.unit;
            const buffs = ret.buffs;
            const attr = ret.attr;
            if (unit.isValid()) {
                const name = unit.name;
                const lv = unit.level;
                const exp = unit.experience;
                const state: IState & IStates = {
                    ...this.state,
                    name,
                    lv,
                    exp,
                    attr,
                    buffs,
                    visible: true,
                }
                if (JSON.stringify(state) === JSON.stringify(this.state)) {
                    return;
                }
                const currentBuff = buffs[this.state.index];
                if (currentBuff) {
                } else {
                    state.infoVisible = false;
                }
                this.setState(state)
            }
        }
    }

    showInfoPage = (x: number, y: number, index: number) => {
        const currentBuff = this.state.buffs[this.state.index];

        let title = currentBuff?.name ? currentBuff?.name : ''
        let time = currentBuff?.time ? `${currentBuff?.time}` : ''
        let des = currentBuff?.des ? currentBuff?.des : ''
        publicGui.showInfoPage(x, y, title, time, des);
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    getVisible = () => {
        return this.state.visible
    }

    closeBar = () => {
        this.setState({
            ... this.state,
            visible: false
        })
    }
}